import { HelpViewProps } from './interface'
import { StyledHelp } from './style'
const useHelpHook = ({ setIsShowHelp }: HelpViewProps) => {
	const closeShowHelp = () => {
		setIsShowHelp && setIsShowHelp(false)
	}
	return { closeShowHelp }
}
const HelpView = ({ setIsShowHelp, isShowCloseBtn = true }: HelpViewProps) => {
	const { ...useHook } = useHelpHook({ setIsShowHelp })
	return (
		<StyledHelp className={`help-info-wrap`}>
			<ul>
				<li className="help-title-wrap">
					<span className="help-title">密码安全</span>
					{isShowCloseBtn && <span className="close-help" onClick={() => useHook.closeShowHelp()}></span>}
				</li>
				{/* <li className="weak-help help-li">
					<p className="tip">弱：包含数字或字母字符两种类型中的一种。</p>
					<p className="example-help help-first">示例：6666666666</p>
					<p className="example-help help-none-first">aaaabbbccc</p>
				</li> */}
				<li className="medium-help help-li">
					<p className="tip">中：包含数字或字母或特殊字符三种类型中的两种。</p>
					<p className="example-help help-first">示例：1234ab5678</p>
					<p className="example-help help-none-first">1.23456.78</p>
					<p className="example-help help-none-first">ABCDE12345</p>
				</li>
				<li className="strong-help help-li">
					<p className="tip">强：必须包含数字、字母和特殊字符三种类型。</p>
					<p className="example-help help-first">示例：123456.7aA</p>
					<p className="example-help help-none-first">123456.7aA</p>
				</li>
			</ul>
		</StyledHelp>
	)
}

export default HelpView
